<template>
	<view class="custom-nav">
		<view class="search-container" @click="returnindex">
			<image src="../../static/主页white.png" class="search-icon"></image>
		</view>
		<view class="custom-title">惠商城</view>
	</view>

	<view class="search_">
		<input type="text" placeholder="请搜索你想发现的宝贝" v-model="name" />
		<button class="toSearch" @click="search_items">搜索</button>
	</view>
	<!-- 商品列表 -->
	<view class="com_list">
		<comlistVue :comdatas="datas"></comlistVue>
		<button v-if="showScrollButton" @click="scrollToTop" class="scroll-to-top"></button>
	</view>
</template>

<script>
	// 导入搜索
	import {
		searchByKeyword
	} from "@/api/request.js"
	// 导入商品列表组件
	import comlistVue from "@/components/toSearch/comlist.vue";
	export default {
		props: {
			item_name: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				// 回到顶部
				showScrollButton: false,
				name: "",
				datas: [],
				myname: "",
				itemIndex: 1,
				newres:[]
			}
		},
		components: {
			comlistVue
		},
		mounted() {
			// 添加滚动事件监听器
			window.addEventListener('scroll', this.handleScroll);
		},
		beforeDestroy() {
			// 移除滚动事件监听器
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			// 返回主页
			returnindex() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 搜索
			async search_items() {
				try {
					// 清除数据
					this.datas = [];
					console.log("搜索框的值",this.name)
					console.log("传输的值", this.myname);
					if(this.name && this.myname){
						this.newres = await searchByKeyword({
							query: this.name,
							page_index: this.itemIndex
						});
					}
					if(!this.name){
						this.newres = await searchByKeyword({
							query: this.myname,
							page_index: this.itemIndex
						});
					}
					console.log("newres", this.newres.data.list_v2);
					// 删除多余数据
					let key1 =  this.newres.data.list_v2.length;
					if(this.newres.data.list_v2[key1-1].view_type=="view_recommend_class"){
						this.newres.data.list_v2.splice(key1 - 1, 1);
					}
					// 判断是否newres.data.list_v2变化了
					if (this.datas[0] != this.newres.data.list_v2[0]) {
						this.datas.push(...this.newres.data.list_v2);
					} else {
						console.log(出错或者index无变化)
					}
					console.log("data", this.datas)
				} catch (error) {
					console.log("error", error);
				}
			},
			handleScroll() {
				const windowHeight = window.innerHeight;
				const scrollPosition = window.scrollY;
				// 如果滚动距离大于一个页面的高度，显示按钮
				this.showScrollButton = scrollPosition > windowHeight;
			},
			scrollToTop() {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			}
		},
		onLoad(options) {
			// 获取传递的参数
			this.myname = decodeURIComponent(options.item_name);
			console.log("this.myname", this.myname);
			this.search_items();
			this.name = uni.getStorageSync('search_name');
			console.log("传递的参数", this.name);
		},
	}
</script>

<style scoped>
	.custom-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		height: 160rpx;
		background-color: #ff5218;
		color: white;
	}

	.search-container {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-icon {
		width: 24px;
		height: 24px;
		margin-top: 70rpx;
	}

	.custom-title {
		font-size: 18px;
		text-align: center;
		position: relative;
		width: 200rpx;
		height: 100rpx;
		display: flex;
		margin: 0 auto;
		margin-left: 200rpx;
		margin-top: 120rpx;
		font-weight: bold;
	}

	.search_ {
		width: 100%;
		height: 70rpx;
		background-color: transparent;
		margin-bottom: 12rpx;
	}

	.search_ input {
		background-color: #ececec;
		display: inline-block;
		height: 100%;
		width: 75%;
		padding-left: 20rpx;
		border-radius: 40rpx;
		margin: 0;
	}

	.toSearch {
		display: inline-block;
		background-color: #d5d5d5;
		border-radius: 0rpx;
		font-size: 16px;
		border: 0;
		margin: 0;
		width: 22%;
		height: 100%;
	}

	.scroll-to-top {
		position: fixed;
		right: 20rpx;
		width: 120rpx;
		height: 140rpx;
		top: 70%;
		background-image: url(../../static/回到顶部.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #424242;
	}

</style>